<template>
  <div class="wrap">
        <!-- 头部 -->
        <div class="header">
            <p>拼租</p>
            <a href="">···</a>
        </div>
        <!-- 筛选导航 -->
        <div class="select">
            <span>全部</span>
            <span>筛选</span>
        </div>
        <!-- 商品列表展示 -->
        <ul class="goodsList" v-infinite-scroll="load" v-show="!isEmpty" infinite-scroll-immediate="false">
            <li v-for="(item,index) in goods" :key="index" class="goods">
                <img :src="item.coverImages">
                <!-- 商品详情 -->
                <div class="intro" @click="ToDetail(item)">
                    <span class="text">{{item.title}}</span>
                    <span class="price">￥{{item.priceMonth}}&nbsp;/&nbsp;月</span>
                </div>
                <!-- 跳转聊天 -->
                <router-link class="chat" 
                    :to="{
                        name:'msgDetail',
                        params:{
                            id:item.userId,
                            lastTime:new Date().toLocaleDateString()
                        }

                    }">
                    <i class="iconfont icon-xinxi"></i>
                </router-link>
            </li>
        </ul>
        <el-empty  
            class="empty" 
            v-if="isEmpty" 
            :image-size="240" 
            description="您搜索的商品不见了" 
        />
        <CommonNav></CommonNav>
    </div>
</template>

<script setup>
import { ElLoading } from 'element-plus'
import CommonNav from '@/components/CommonNav.vue';
import {onMounted, reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
import { useStore } from "vuex";

const router =useRouter()
const store = useStore();
let isEmpty=ref(false)
let goods=reactive([]);
onMounted(()=>{
    load()
})
const getGoods=()=>{
    //如果是搜索回来需要更新清空商品列表
    if(store.state.together.isSearch){
        goods.splice(0,goods.length)
    }
    store.dispatch('together/getGoods',20).then(res=>{
            //说明无相关关键词的商品
            if(res.data.length==0){
                //清除关键词
                store.commit("together/setKeyWord"," ")
                //设置为空
                isEmpty.value=true
                //重新请求
                store.dispatch('together/getGoods',20).then(res=>{
                    res.data.forEach(ele=>{
                        goods.push(ele)
                    })
                    //设置两秒后恢复
                    setTimeout(() => {
                        isEmpty.value=false
                    }, 2000)
                })
            }
            else{
                res.data.forEach(ele=>{
                    goods.push(ele)
                })
            }
        }
    )
}
const load = () => {
    console.log("执行了");
    getGoods()
    //设置加载延迟特效
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0)',
    })
    setTimeout(() => {
        loading.close()
    }, 200)
    console.log("执行结束了");
}
const ToDetail=(item)=>{
    store.dispatch('together/getMoreMsg',item)
}

</script>

<style lang="scss" scoped>
.wrap{
    transition: none;
    width: 4.29rem;
    height: 9.26rem;
}
.header{
    position: relative;
    background-color: #6fa11e;
    height: 0.88rem;
    text-align: center;
    border: 0.01rem solid rgba(187, 187, 187, 1);
    p{
        position: absolute;
        top:0.50rem;
        left: 1.94rem;
        font-size: 0.2rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        color: #ffffff;
    }
    /* 更多 */
    a{
        position: absolute;
        color:white;
        font-size: 0.28rem;
        bottom:0.1rem;
        right: 0.2rem;
        width: 0.28rem;
        height: 0.28rem;
    }
}
.select{
    display: flex;
    width: 100%;
    height: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0px 1px 10px 1px #ddd;
    margin-bottom: 0.1rem;
    span{
        width: 20%;
        height: 0.5rem;
        line-height: 0.5rem;
        text-align: center;
    }
}
.goodsList{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 700px;
    overflow: auto;
    .goods{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 90%;
        height: 1.5rem;
        border-radius: 0.2rem;
        background-color: #fff;
        box-shadow: 0px 3px 10px 1px #ddd;
        margin: 0.1rem 0px;
        img{
            width: 0.75rem;
            height: 0.75rem;
        }
        .intro{
            
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            width: 2rem;
            height: 1.5rem;
            .text{
                width: 100%;
                height: 0.6rem;
                font-size: 0.15rem;
            }
            .price{
                font-size: 0.2rem;
                font-weight: bold;
                color: #F7CB28;
            }
        }
        .chat{
                align-self: flex-end;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                background-color: #80B923;
                margin-bottom: 0.1rem;
                i{
                    color: #fff;
                    font-size: 0.3rem;
                    
                }
            }
    }
}

</style>


